import React, { useEffect } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import BackButton from "./components/BackButton";
import BottomNav from "./components/BottomNav";
import EventBus from "./util/EventBus";
import { useToast } from "./util/util";

// 如果没有登录，该不该让用户可以访问  login 以外的页面？
// 当前这个项目，是基本都需要用户登录后才能操作的
// 不能！！，找一个地方，对token进行判断，当token不存在，需要 跳转到login
// 所有需要登录才能操作的 页面， 都是经过APP这个组件，所以可以在这里进行判断

export default function App() {
  // 获取token
  const token = sessionStorage.getItem("token");
  const navigate = useNavigate();
  const toast = useToast();
  useEffect(() => {
    // 判断token
    if (!token) {
      toast("请先登录", "error");
      // 跳转到login
      navigate("/login", { replace: true }); // replace：true 是覆盖历史
    }
  }, []);

  // 在App里面订阅一下登录超时
  // 这个app里面的所有子组件都是需要登录并且登录有效的时候才能使用的
  EventBus.on("loginTimeout", function () {
    // 如果登录失效 1.弹出提示  2.跳转到login
    toast("登录失效", "error");
    navigate("/login", { replace: true });
  });

  // 为了让没有token的时候没法渲染子路由对应的组件，我判断一下，根据是否有token返回对应的结构
  if (token) {
    return (
      <div>
        <div style={{ minHeight: "calc(100vh - 13.333333vw)" }}>
          <Outlet />
        </div>
        <BottomNav />
        <BackButton />
      </div>
    );
  } else {
    return <></>; // 空标签
  }
}
